<!-- 短视频界面 -->
<template>
	<!-- 头部返回按钮 -->
	<view class="video-return">
		<view :style=" 'height:' + btn_top + 'px;' "></view>
		<view :style=" 'height:' + btn_height + 'px;' " class="video-return-img">
			<view>
				<image src="/static/images/video-return.svg" mode="aspectFit" @click="goBack">
				</image>
			</view>
		</view>
	</view>

	<!-- 短视频整体部分 -->
	<view :style=" 'height:' + screenHeight + 'px;' " class="trim-video">
		<!-- 短视频 将默认播放按钮禁用，自定义 -->
		<video id="myVideo" :style=" 'height:' + screenHeight + 'px;' " :src="video_data.video_url" :controls='false' :loop='true' :show-center-play-btn="false" :autoplay="true" object-fit="cover"
			picture-in-picture-mode="{{['push','pop']}}" @enterpictureinpicture="enterpictureinpicture" @play="playFun" @pause="pauseFun">
		</video>

		<!-- 这个 view 占据全屏覆盖视频 且透明，便于点击任意一个部分暂停、播放 视频 -->
		<view class="full-screen" @click="fullScreen"></view>

		<!-- 自定义播放按钮 -->
		<view class="video-img" @click="videoPlay" v-show="startVideo">
			<image src="/static/images/video-play.svg" mode="aspectFit"></image>
		</view>

		<!-- 底部左边（商品小卡片）-->
		<view class="advert-left">
			<view class="goods-detail" @click="goDetail">
				<image :src="video_data.goods_cover" mode="aspectFill"></image>
				<view class="goods-price">
					<text>￥{{video_data.goods_price}}</text>
					<text>抢</text>
				</view>
			</view>
			<!-- 商品标题 -->
			<view class="goods-title overflow">{{video_data.goods_title}}</view>
		</view>

		<!-- 右边的评论收藏等等 -->
		<view class="user-right">
			<!-- 评论 -->
			<view class="right-item" @click="startComment">
				<view>
					<image src='/static/images/video-comment.svg' mode="aspectFit"></image>
				</view>
				<!-- 评论条数 没有人评论就显示评论，否则显示共条数 -->
				<view>{{commentNum === 0 ? '评论' : commentNum}}</view>
			</view>

			<!-- 收藏 -->
			<view class="right-item comment">
				<!-- 收藏 -->
				<view v-if="collectionNum == 0" @click="toCollect">
					<image src="/static/images/video-collect.svg" mode="aspectFit"></image>
				</view>
				<!-- 已收藏 -->
				<view v-else @click="haveCollect">
					<image src="/static/images/video-have-collected.svg" mode="aspectFit"></image>
				</view>
				<!-- 根据收藏次数显示 文字 -->
				<view>{{collectionNum > 0 ? '已收藏' : '收藏'}}</view>
			</view>

			<!-- 分享 -->
			<view class="right-item">
				<!-- open-type="share" 才能转发 -->
				<button open-type="share" :plain='true'>
					<view>
						<image src="/static/images/video-share.svg" mode="aspectFit"></image>
					</view>
					<view>分享</view>
				</button>
			</view>
		</view>
	</view>

	<!-- 评论组件 -->
	<Comment @custom-event='getData'></Comment>

	<!-- 登陆界面 -->
	<Login></Login>

</template>

<script setup>
	// 登录组件
	import Login from '@/components/login-view.vue'
	// 评论组件
	import Comment from '@/pages/short-video/child/comment.vue'

	import { onMounted, reactive, toRefs, watch, onBeforeUnmount } from 'vue'
	import { onLoad, onShareAppMessage,onShow } from '@dcloudio/uni-app'
	import { FeedBack } from "@/public/package-js/feedBack.js"

	// 登录方法
	import { LoginFun } from '@/public/package-js/login.js'

	// 引入用户没有登录时用以调用登录框的数据还有其余数据
	import { login_box, comment_box } from '@/public/package-js/passValue.js'


	// 1、播放器进入小窗触发
	function enterpictureinpicture() {}

	const data = reactive({
		btn_height: 0, // 胶囊的高度
		btn_top: 0, //按钮距离顶部的高度
		screenHeight: 0, // 手机屏幕的高度
		videoContext: {}, // 视频上下文
		startVideo: true, // 播放按钮是否展示
		goods_id: '', // 点击商品传递过来的商品id
		video_data: {}, // 商品视频、标题等信息
		commentNum: 0, // 评论的条数
		collectionNum: 0, // 商品被收藏的次数（未登录0,已登录就是总共收藏次数）
		success_login: 0 // 用来暂存登陆成功后，商品的收藏次数
	})
	const { btn_height, btn_top, screenHeight, startVideo, video_data, commentNum, collectionNum } = toRefs(data)

	onMounted(() => {
		capsule()
		// 获取视频的上下文，就可以对视频进行操作
		data.videoContext = uni.createVideoContext('myVideo')
		// console.log(data.videoContext);
	})


	// 2、获取胶囊按钮的位置信息
	function capsule() {
		// #ifndef APP-PLUS || H5 || MP-ALIPAY
		// 获取胶囊位置,API getMenuButtonBoundingClientRect 只有在微信小程序运行的时候才会生效，H5端查看会报错
		let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
		// console.log("menuButtonInfo", menuButtonInfo);
		data.btn_height = menuButtonInfo.height
		data.btn_top = menuButtonInfo.top
		// 获取手机屏幕宽高
		data.screenHeight = uni.getSystemInfoSync().screenHeight
		// console.log("data.screenHeight", data.screenHeight);
		// #endif
	}

	// 2、视频播放
	// 2-1 开始播放
	function videoPlay() {
		data.videoContext.play()
	}

	// 2-1 暂停或者继续播放  
	function fullScreen() {
		data.startVideo = !data.startVideo
		if (data.startVideo) { // 播放按钮显示
			// 暂停
			data.videoContext.pause()
		} else {
			// 播放
			data.videoContext.play()
		}
	}

	// 2-3 开始/继续播放 触发 将按钮隐藏
	function playFun() {
		data.startVideo = false
	}

	// 2-4 暂停播放触发,将按钮显示
	function pauseFun() {
		data.startVideo = true
	}

	// 3、请求短视频的数据
	const db = wx.cloud.database()
	onLoad(async (event) => {
		// 将传递的商品id存起来
		data.goods_id = event.goods_id
		getData()
	})
	onShow(()=>{   // 为了在商品详情页收藏之后，这个页面跟随改变
		getData()
	})
	
	async function getData(){
		//取出本地缓存的用户信息
		const user = uni.getStorageSync('user_info')
		
		// (1)、根据商品id获取商品信息
		const goodData = await db.collection('goods').doc(data.goods_id).field({
			video_url: true,
			goods_cover: true,
			goods_title: true,
			goods_price: true,
			seckill: true
		}).get()
		
		// (2)、获取该商品所有评论的总条数
		const commentCount = await db.collection('video_comment').where({ goods_id: data.goods_id }).count()
		
		// (3)、根据商品id查找该商品收藏数据
		const collect = await db.collection('collect_goods').where({ 
			goods_id: data.goods_id,
			_openid:user.openid
		}).get()
		
		Promise.all([goodData, commentCount, collect])
			.then(async res => {
				console.log("res",res);
	
				data.video_data = res[0].data //短视频数据
				data.commentNum = res[1].total //评论的条数
		
				// 是否有用户登录信息，有的话就显示收藏数据，没有的话就显示 0 
				data.collectionNum = user ? res[2].data.length : 0 //商品被收藏的次数
		
				data.success_login = res[2].data.length //如果登陆成功就取这里的收藏数据次数
		
				// 该商品是否参与秒杀，如果有，就展示秒杀的价格
				if (res[0].data.seckill) {
					// 获取该商品秒杀的信息
					const seckill = await db.collection('seckill').where({ goods_id: data.goods_id }).field({ seckill_price: true }).get()
					data.video_data.goods_price = seckill.data[0].seckill_price
				}
			})
			.catch(err => {
				console.log(err)
			})
	}

	// 4、点击收藏
	async function toCollect() {
		//取出本地缓存的用户信息
		const user = uni.getStorageSync('user_info')
		if (!user) {
			login_box.show = true; //显示登录框
			return false
		}
		// 登陆之后
		try {
			await db.collection('collect_goods').add({
				data: {
					goods_id: data.goods_id
				}
			})
			data.collectionNum++ // 收藏数量 + 1
			new FeedBack("收藏成功", "none").toast()
		} catch (e) {
			new FeedBack("收藏失败", "error").toast()
		}
	}

	// 4-1 监听用户是否登陆成功
	watch(() => login_box.response, (newVal, oldVal) => {
		// 将登陆成功暂存的收藏次数赋值
		data.collectionNum = data.success_login
	})

	// 5、已收藏，再次点击取消收藏
	async function haveCollect() {
		//取出本地缓存的用户信息
		const user = uni.getStorageSync('user_info')
		if (!user) {
			login_box.show = true;
			return false
		}
		try {
			// 删除数据库中对应商品的收藏
			await db.collection('collect_goods').where({
				goods_id: data.goods_id,
				_openid: user.openid
			}).remove()
			data.collectionNum = 0
			new FeedBack("取消收藏成功", "none").toast()
		} catch (e) {
			// console.log("111111111111111",e);
			new FeedBack("取消收藏失败", "error").toast()
		}

	}

	// 6、点击评论按钮拉出评论框
	function startComment() {
		// 让弹框显示
		comment_box.show = true
		comment_box.num++ //让点开评论的次数增加
		comment_box.goods_id = data.goods_id // 将当前页面的商品 id 进行赋值
	}

	// 7、分享-转发给好友
	onShareAppMessage(() => {
		// 自定义转发内容
		return {
			// 转发的商品标题
			title: data.video_data.goods_title,
			// 当前页面 path ，必须是以 / 开头的完整路径 好友会跳转到 path对应的页面
			path: `/pages/short-video/short-video?goods_id=${data.goods_id}`,
			// 自定义图片路径
			imageUrl: data.video_data.goods_cover
		}
	})

	// 8、返回上一页
	function goBack() {
		// 触发小窗播放
		data.videoContext.play()

		// 返回上一页
		uni.navigateBack({
			delta: 1
		})
		// 将拉起评论次数重置
		comment_box.num = 0
	}

	// 9、点击左下角商品 跳转详情页
	function goDetail() {
		uni.navigateTo({
			url: `/pages/goods-detail/goods-detail?goods_id=${data.goods_id}`
		})
	}
	
</script>

<style scoped>
	.video-return {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99;
	}

	.video-return-img view {
		width: 50rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
	}

	.video-return-img image {
		width: 50rpx;
		height: 50rpx;
		display: block;
	}

	/* 视频 */
	.trim-video {
		width: 100%;
		position: relative;
		overflow: hidden;
	}

	.trim-video video {
		width: 100%;
	}

	/* 全屏透明覆盖 */
	.full-screen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.01);
	}

	/* 自定义按钮 */
	.video-img image {
		width: 110rpx;
		height: 110rpx;
		z-index: 999;
		/* border: 2px solid #FFFFFF;
	border-radius: 50%; */
	}

	.video-img {
		width: 110rpx;
		height: 110rpx;
		position: absolute;
		bottom: 0;
		left: 50%;
		top: 50%;
		transform: translateX(-50%) translateY(-50%);
	}

	/* 详情页和标题 */
	.advert-left {
		position: absolute;
		left: 20rpx;
		bottom: 85rpx;
	}

	.goods-detail {
		/* height: 170rpx; */
		width: 300rpx;
		background-color: red;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.goods-detail image {
		height: 120rpx;
		width: 300rpx;
		display: block;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
	}

	.goods-price text {
		display: block;
	}

	.goods-price {
		display: flex;
		/* align-items: center; */
		justify-content: space-between;
		padding: 9rpx 10rpx;
		font-size: 27rpx;
		color: #FFFFFF;
		font-weight: bold;
	}

	.goods-title {
		width: 500rpx;
		line-height: 1.5;
		font-size: 30rpx;
		color: #FFFFFF;
	}

	/* 右边用户操作 */
	.user-right {
		position: absolute;
		right: 20rpx;
		bottom: 85rpx;
		width: 100rpx;
		font-size: 25rpx;
		color: #FFFFFF;
	}

	.user-right image {
		width: 55rpx;
		height: 55rpx !important;
	}

	.right-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.right-item button {
		border: navajowhite;
		padding: inherit !important;
		margin: 0 !important;
		font-size: 25rpx !important;
		line-height: inherit !important;
		color: #FFFFFF !important;
	}

	.comment {
		margin: 60rpx 0;
	}
</style>
